<template>
  <div class="Details">
    <el-card v-loading="loading">
      <el-descriptions class="margin-top" title="基础信息" :column="3" border>
        <template slot="extra">
          <el-button type="primary" size="small" @click="edit"
            >保存资料</el-button
          >
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            工会名称
          </template>
          <el-input size="small" v-model="name"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            联系人
          </template>
          <el-input size="small" v-model="leader"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            联系方式
          </template>
          <el-input size="small" v-model="phone"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            创建时间
          </template>
          <el-input size="small" disabled v-model="create_time"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            主播人数
          </template>
          <el-input size="small" v-model="anchor_num" disabled></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            银行卡号
          </template>
          <el-input size="small" v-model="bank_card_number"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            预留姓名
          </template>
          <el-input size="small" v-model="reserved_name"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            银行
          </template>
          <el-input size="small" v-model="bank_name"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            分成比例
          </template>
          <el-input size="small" style="width: 90%" v-model="ratio"></el-input>
          %
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            结算税率
          </template>
          <el-input style="width: 90%" size="small" v-model="tax_rate">
          </el-input>
          %
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            结算方式
          </template>
          <el-select v-model="type" size="small" placeholder="请选择">
            <el-option label="日结" value="1"> </el-option>
            <el-option label="月结" value="2"> </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item :span="1">
          <template slot="label">
            <i class="el-icon-office-building"></i>
            结算日期
          </template>
          每月
          <el-input
            :disabled="type == 1"
            v-model="settlement_time"
            onkeyup="value=value.replace(/[^\d]/g,'')"
            style="width: 100px"
            size="small"
          ></el-input>
          日
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            工会后台账号
          </template>
          <el-input size="small" v-model="account"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            工会后台密码
          </template>
          <el-input size="small" v-model="password"></el-input>
        </el-descriptions-item>
        <el-descriptions-item></el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        class="margin-top"
        style="margin-top: 20px"
        title="工会收益"
        :column="3"
        border
      >
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            宝石收益数
          </template>
          <el-input size="small" v-model="diamond_income" disabled></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            平台宝石收益数
          </template>
          <el-input
            size="small"
            v-model="platform_diamond_income"
            disabled
          ></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            工会宝石收益数
          </template>
          <el-input
            size="small"
            v-model="union_diamond_income"
            disabled
          ></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            已结算宝石数
          </template>
          <el-input size="small" v-model="settled_diamond" disabled></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            未结算宝石数
          </template>
          <el-input
            size="small"
            v-model="unsettled_diamond"
            disabled
          ></el-input>
        </el-descriptions-item>
        <el-descriptions-item></el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
import {
  AdminUnionUnionDetails,
  AdminUnionEditUnionInfo,
} from "@/api/UnionManagement";
import moment from "moment";
export default {
  props: ["id", "phone1"],
  data() {
    return {
      paymentType: "",
      loading: false,
      //信息
      account: "",
      anchor_num: "",
      bank_card_number: "",
      bank_name: "",
      create_time: "",
      diamond_income: "",
      id1: "",
      leader: "",
      name: "",
      password: "",
      phone: "",
      ratio: "",
      reserved_name: "",
      settled_diamond: "",
      tax_rate: "",
      type: "",
      unsettled_diamond: "",
      settlement_time: "",
    };
  },
  methods: {
    async getData() {
      if (this.id || this.phone1) {
        this.loading = true;
        console.log(this.id);
        const res = await AdminUnionUnionDetails({
          id: this.id,
          phone: this.phone1,
        });
        this.loading = false;
        if (res.code == 0) {
          this.account = res.data[0].account;
          this.anchor_num = res.data[0].anchor_num;
          this.bank_card_number = res.data[0].bank_card_number;
          this.bank_name = res.data[0].bank_name;
          this.create_time = moment(res.data[0].create_time * 1000).format(
            "YYYY-MM-DD hh:mm:ss"
          );
          this.diamond_income = res.data[0].diamond_income;
          this.id1 = res.data[0].id;
          this.leader = res.data[0].leader;
          this.name = res.data[0].name;
          this.password = res.data[0].password;
          this.phone = res.data[0].phone;
          this.platform_diamond_income = res.data[0].platform_diamond_income;
          this.ratio = res.data[0].ratio;
          this.reserved_name = res.data[0].reserved_name;
          this.settled_diamond = res.data[0].settled_diamond;
          this.settlement_time = res.data[0].settlement_time;
          this.tax_rate = res.data[0].tax_rate;
          this.type = res.data[0].type;
          this.union_diamond_income = res.data[0].union_diamond_income;
          this.unsettled_diamond = res.data[0].unsettled_diamond;
        }
      }
    },
    //编辑工会AdminUnionEditUnionInfo
    edit() {
      this.$confirm("是否保存编辑信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await AdminUnionEditUnionInfo({
            union_id: this.id1,
            leader: this.leader,
            phone: this.phone,
            ratio: this.ratio,
            type: this.type,
            tax_rate: this.tax_rate,
            settlement_time: this.settlement_time,
            account: this.account,
            password: this.password,
            reserved_name: this.reserved_name,
            bank_card_number: this.bank_card_number,
            bank_name: this.bank_name,
            name: this.name,
          });
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "保存成功!",
            });
            this.getData();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
          this.getData();
        });
    },
  },
};
</script>

<style scoped lang="less">
.Details {
  /deep/.el-descriptions-item__label {
    width: 200px;
  }
}
</style>